<template>
  <section id="group-events" class="py-12 px-4 md:px-8 bg-gradient-to-br from-blue-900/20 to-purple-900/20 reveal-section">
    <div class="container mx-auto">
      <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-12 text-center">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">历史群活动</span>
      </h2>

      <div class="relative">
        <!-- 时间线 -->
        <div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 via-purple-500 to-pink-500 transform md:-translate-x-1/2"></div>

        <!-- 活动项目 -->
        <div class="space-y-12" ref="eventItemsContainer">
          <!-- 活动1 -->
          <div ref="eventItem1" class="event-item relative flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
              <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
                <span class="inline-block px-3 py-1 bg-blue-500/20 text-blue-300 text-xs font-medium rounded-full mb-3">2022年09月02日</span>
                <h3 class="text-xl font-bold mb-2">抽奖-1</h3>
                <p class="text-gray-300 mb-4">主题：22年首次中秋抽奖活动</p>
                <div class="flex flex-wrap gap-2">
                  <span class="px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full">月饼</span>
                  <span class="px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full">小米巨能写</span>
                  <span class="px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full">拼手气红包</span>
                </div>
              </div>
            </div>

            <div class="absolute left-0 md:left-1/2 w-8 h-8 rounded-full bg-blue-500 border-4 border-blue-900 transform md:-translate-x-1/2 z-10"></div>

            <div class="md:w-1/2 md:pl-12 md:mt-0"></div>
          </div>

          <!-- 活动2 -->
          <div ref="eventItem2" class="event-item relative flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right md:order-1 md:mt-0"></div>

            <div class="absolute left-0 md:left-1/2 w-8 h-8 rounded-full bg-pink-500 border-4 border-blue-900 transform md:-translate-x-1/2 z-10"></div>

            <div class="md:w-1/2 md:pl-12 mb-6 md:mb-0">
              <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
                <span class="inline-block px-3 py-1 bg-pink-500/20 text-pink-300 text-xs font-medium rounded-full mb-3">2023年09月12日</span>
                <h3 class="text-xl font-bold mb-2">抽奖-2</h3>
                <p class="text-gray-300 mb-4">主题：23年中秋抽奖活动</p>
                <div class="flex flex-wrap gap-2">
                  <span class="px-2 py-1 bg-pink-900/50 text-pink-300 text-xs rounded-full">散装五仁月饼X6</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 活动3 -->
          <div ref="eventItem3" class="event-item relative flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
              <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
                <span class="inline-block px-3 py-1 bg-green-500/20 text-green-300 text-xs font-medium rounded-full mb-3">2024年09月13日</span>
                <h3 class="text-xl font-bold mb-2">抽奖-3</h3>
                <p class="text-gray-300 mb-4">主题：24年中秋抽奖活动</p>
                <div class="flex flex-wrap gap-2">
                  <span class="px-2 py-1 bg-green-900/50 text-green-300 text-xs rounded-full">散装五仁月饼X3</span>
                  <span class="px-2 py-1 bg-green-900/50 text-green-300 text-xs rounded-full">群主陪睡券X5</span>
                </div>
              </div>
            </div>

            <div class="absolute left-0 md:left-1/2 w-8 h-8 rounded-full bg-green-500 border-4 border-blue-900 transform md:-translate-x-1/2 z-10"></div>

            <div class="md:w-1/2 md:pl-12 md:mt-0"></div>
          </div>

          <!-- 活动4 -->
          <div ref="eventItem4" class="event-item relative flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mt-0"></div>

            <div class="absolute left-0 md:left-1/2 w-8 h-8 rounded-full bg-red-500 border-4 border-blue-900 transform md:-translate-x-1/2 z-10"></div>

            <div class="md:pl-12 mb-6 md:mb-0" style="width: 300px">
              <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
                <span class="inline-block px-3 py-1 bg-red-500/20 text-red-300 text-xs font-medium rounded-full mb-3">2025年01月01日</span>
                <h3 class="text-xl font-bold mb-2">元旦跨年夜</h3>
                <p class="text-gray-300 mb-4">主题：元旦位置共享</p>
                <div class="flex flex-wrap gap-2">
                  <span class="px-2 py-1 bg-red-900/50 text-red-300 text-xs rounded-full">位置共享</span>
                  <span class="px-2 py-1 bg-red-900/50 text-red-300 text-xs rounded-full">跨年</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 活动5 -->
          <div ref="eventItem5" class="event-item relative flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right md:order-1 md:mt-0"></div>

            <div class="absolute left-0 md:left-1/2 w-8 h-8 rounded-full bg-yellow-500 border-4 border-blue-900 transform md:-translate-x-1/2 z-10"></div>

            <div class="md:pl-12 mb-6 md:mb-0">
              <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
                <span class="inline-block px-3 py-1 bg-yellow-500/20 text-yellow-300 text-xs font-medium rounded-full mb-3">2025年03月30日</span>
                <h3 class="text-xl font-bold mb-2">抽奖-4</h3>
                <p class="text-gray-300 mb-4">主题：小风车三周年抽奖活动</p>
                <div class="flex flex-wrap gap-2 w-60">
                  <span class="px-2 py-1 bg-yellow-900/50 text-yellow-300 text-xs rounded-full">帆布包X1</span>
                  <span class="px-2 py-1 bg-yellow-900/50 text-yellow-300 text-xs rounded-full">抱枕X2</span>
                  <span class="px-2 py-1 bg-yellow-900/50 text-yellow-300 text-xs rounded-full">治愈语录X3</span>
                  <span class="px-2 py-1 bg-yellow-900/50 text-yellow-300 text-xs rounded-full">不死图腾X10</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 为每个活动项目创建ref
const eventItem1 = ref(null)
const eventItem2 = ref(null)
const eventItem3 = ref(null)
const eventItem4 = ref(null)
const eventItem5 = ref(null)

// 存储所有活动项目ref
const eventItems = ref([])

onMounted(() => {
  nextTick(() => {
    // 收集所有活动项目ref
    eventItems.value = [
      eventItem1.value,
      eventItem2.value,
      eventItem3.value,
      eventItem4.value,
      eventItem5.value
    ].filter(Boolean) // 过滤掉null

    if (eventItems.value.length === 0) return

    // 配置Intersection Observer
    const observerOptions = {
      root: null,
      rootMargin: '0px 0px -20% 0px', // 当项目顶部进入视口20%时触发
      threshold: 0.1
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          // 为每个项目设置不同的动画延迟
          const delay = index * 300 // 每个项目延迟300ms

          setTimeout(() => {
            entry.target.classList.add('event-visible')
            observer.unobserve(entry.target)
          }, delay)
        }
      })
    }, observerOptions)

    // 开始观察所有项目
    eventItems.value.forEach(item => {
      observer.observe(item)
    })
  })
})
</script>

<style scoped>
/* 活动项目初始样式 - 隐藏并定位在下方 */
.event-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1),
  transform 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

/* 活动项目可见样式 */
.event-item.event-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 活动卡片悬停效果增强 */
.event-item.event-visible > div > div {
  transition: all 0.3s ease;
}

.event-item.event-visible > div > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 15px rgba(37, 99, 235, 0.3);
}
</style>
